<template>
  <div class="action-buttons">
    <template v-for="(action, index) in visibleActions" :key="index">
      <el-button
        v-if="action.type === 'button'"
        :type="action.buttonType || 'primary'"
        :size="action.size || 'small'"
        :icon="action.icon"
        :disabled="action.disabled"
        :loading="action.loading"
        :link="action.link"
        :plain="action.plain"
        @click="handleAction(action)"
      >
        {{ action.label }}
      </el-button>

      <el-dropdown
        v-else-if="action.type === 'dropdown'"
        :size="action.size || 'small'"
        @command="(command) => handleDropdownAction(action, command)"
      >
        <el-button
          :type="action.buttonType || 'primary'"
          :size="action.size || 'small'"
          :icon="action.icon"
          :plain="action.plain"
        >
          {{ action.label }}
          <el-icon class="el-icon--right">
            <ArrowDown />
          </el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="(item, idx) in getVisibleDropdownItems(action.items)"
              :key="idx"
              :command="item.command"
              :disabled="item.disabled"
              :divided="item.divided"
            >
              <el-icon v-if="item.icon">
                <component :is="item.icon" />
              </el-icon>
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <el-divider
        v-if="action.divider && index < visibleActions.length - 1"
        direction="vertical"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";

interface DropdownItem {
  label: string;
  command: string;
  icon?: any;
  disabled?: boolean;
  divided?: boolean;
  show?: boolean | ((row: any) => boolean);
}

interface ActionItem {
  type: "button" | "dropdown";
  label: string;
  command?: string;
  buttonType?: "primary" | "success" | "warning" | "danger" | "info" | "text";
  size?: "large" | "default" | "small";
  icon?: any;
  disabled?: boolean;
  loading?: boolean;
  link?: boolean;
  plain?: boolean;
  divider?: boolean;
  show?: boolean | ((row: any) => boolean);
  items?: DropdownItem[]; // 下拉菜单项
}

interface Props {
  actions: ActionItem[];
  row: any;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  action: [command: string, row: any];
}>();

// 计算可见的操作按钮
const visibleActions = computed(() => {
  return props.actions.filter((action) => {
    // 检查基本的show条件
    if (action.show === false) return false;
    if (typeof action.show === "function" && !action.show(props.row)) {
      return false;
    }

    // 如果是下拉菜单，检查是否有可见的子项
    if (action.type === "dropdown" && action.items) {
      const visibleItems = getVisibleDropdownItems(action.items);
      return visibleItems.length > 0;
    }

    return true;
  });
});

// 过滤可见的下拉菜单项
const getVisibleDropdownItems = (items?: DropdownItem[]) => {
  if (!items) return [];
  return items.filter((item) => {
    if (item.show === false) return false;
    if (typeof item.show === "function") {
      return item.show(props.row);
    }
    return item.show !== false;
  });
};

// 处理按钮点击
const handleAction = (action: ActionItem) => {
  if (action.command) {
    emit("action", action.command, props.row);
  }
};

// 处理下拉菜单点击
const handleDropdownAction = (action: ActionItem, command: string) => {
  emit("action", command, props.row);
};
</script>

<style scoped lang="scss">
.action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
</style>
